<template>
<div>
    <p>ID:{{$route.params.id}}</p>
       <ul>
       <li>id:{{messageDetail.id}}</li>
       <li>title:{{messageDetail.title}}</li>
       <li>content:{{messageDetail.content}}</li>
   </ul>
</div>
</template>
<script>
export default {
    data(){
        return{
            messageDetail:{

            }
        }
    },
    mounted(){
         const all=[{
              id:1,
              title:'message001',
              content:'message001 content'
          },
          {
              id:2,
              title:'message002',
              content:'message002 content'
          },
          {
              id:4,
              title:'message004',
              content:'message003 content'
          },
          ] 
        this.all=all
        const id=this.$route.params.id*1
        this.messageDetail=all.find(detail=>detail.id===id)
    },
    watch:{
        $route:function(value){
            const id=value.params.id*1
        this.messageDetail=this.all.find(detail=>detail.id===id)
        }
    }
}
</script>
<style>

</style>
